<template>
    <div class="answer">
        <div class="answer-header">
            <h3>【{{ exam_name }}】考试</h3>
            <!-- <p>{{ exam_name }}</p> -->
            <p>总时长:{{ exam_time }}</p>
        </div>
        <div class="answer-container">
            <div class="title">
                <div><span>考生姓名: </span> <span>{{ user_name }}</span></div>
                <div><span>考试用时: </span> <span>{{ score_exam_time }}</span></div>
                <div><span>考试得分: </span> <span>{{ score_val }}</span></div>
            </div>
            <div class="content">
                <ul>
                    <li v-for="(item, i) in exam_options">
                        <form>
                            <p>
                                <span>{{ i + 1 }}</span>. <span>{{ item.topic_content }}</span> <span>(得分：{{ item.topic_val}})</span></p>

                            <div v-for="colItem, j in item.topic_options">
                                <!-- item.topic_answer == colItem.opt? true : false -->
                                <el-radio v-model="colItem.k" :label="colItem.opt" disabled text-color="#000" fill="#000">
                                    <template>
                                        <span>{{ colItem.opt }} </span>
                                        <span> {{ colItem.text }}</span>
                                        <span> {{ colItem.cdesc }}</span>
                                    </template>
                                </el-radio>
                            </div>

                            <section>
                                <div class="left">
                                    <span>正确答案: {{ item.topic_answer }}</span>
                                </div>
                                <div :class="['right', item.topic_answer == item.answer ? 'success' : 'error']">
                                    <span>答题结果: {{ item.answer }} </span>
                                </div>
                            </section>
                        </form>
                    </li>
                </ul>
            </div>
        </div>


    </div>
</template>

<script>
import { scoreDetail } from '../../api/index';
const downTime = (seconds) => {
    let h = Math.floor(seconds / 3600);
    let m = Math.floor((seconds % 3600) / 60);
    let s = Math.floor(seconds % 60);
    h = h < 10 ? '0' + h : h;
    m = m < 10 ? '0' + m : m;
    s = s < 10 ? '0' + s : s;
    return `${h}小时${m}分钟${s}秒`
}
export default {
    name: 'answer',
    data() {
        return {
            score_id: '',
            user_name: '',
            score_val: '',
            score_exam_time: '',
            exam_time: 0,
            exam_type: '',
            topic_lib_id: '',
            topic_lib_id: '',
            exam_id: '',
            exam_name: '',
            exam_fullcredit: 0,
            exam_passline: 0,
            exam_options: []
        };
    },
    created() {
        this.score_id = this.$route.query.score_id;
        this.scoreDetailFunc(this.score_id);
    },
    watch: {
        // score_id: {
        //     immediate: true,
        //     handler(val){
        //         this.scoreDetailFunc(val);
        //     }
        // },
        $route: {
            deep: true,
            immediate: true,
            handler(val) {
                console.log(val.query.score_id)
                // this.scoreDetailFunc(val);
                this.scoreDetailFunc(val.query.score_id);
            }
        }
    },
    methods: {
        //  获取成绩详情
        async scoreDetailFunc(score_id) {
            await scoreDetail({ score_id }).then(content => {
                console.log('x', content);
                if (content.code == 200) {
                    let result = content.result;
                    if (result.length == 0) {
                        return;
                    }

                    // 
                    let { user_name, score_val, score_exam_time, exam_options, exam_time, exam_type, topic_lib_id, exam_id, exam_name, exam_fullcredit, exam_passline } = result[0];
                    this.user_name = user_name;
                    this.score_val = score_val;
                    this.score_exam_time = score_exam_time;
                    // this.exam_options = exam_options;

                    // 这些地方是心态会炸裂的，各种转义
                    let json_str = JSON.stringify(exam_options);
                    // console.log("1.0-----")
                    // console.log(json_str)
                    // console.log("2.0-----")
                    // let str = json_str.replace(/\\"/g, '"'); 
                    let str = json_str.replace(/\\/g, "");
                    str = str.slice(1, str.length - 1);
                    // console.log(str)
                    // console.log("3.0-----")
                    // console.log(JSON.parse(str))
                    let arr2 = JSON.parse(str);
                    for (let i = 0; i < arr2.length; i++) {
                        let rows = arr2[i].topic_options;
                        for (let j = 0; j < rows.length; j++) {
                            // rows[j].k = "radio"+(i+1);
                            rows[j].k = arr2[i].topic_answer;
                        }
                    }
                    this.exam_options = arr2;
                    // console.log(this.exam_options)
                    this.exam_time = downTime(exam_time * 60);
                    this.exam_type = exam_type;
                    this.topic_lib_id = topic_lib_id;
                    this.exam_id = exam_id;
                    this.exam_name = exam_name;
                    this.score_exam_time = downTime(score_exam_time);
                    this.exam_fullcredit = exam_fullcredit;
                    this.exam_passline = exam_passline;
                }
            })
        }
    }
};
</script>

<style scoped>
.answer {
    background-color: #fff;
    min-height: 900px;
    padding: 10px 20px;
}

.answer-header {
    text-align: center;
}

.answer-header h3 {
    font-size: 18px;
    padding: 20px 0 0 0;
}

.answer-header p {
    font-size: 15px;
    color: #666;
    padding: 5px 0;
}

.answer-container .title {
    width: 100%;
    font-size: 15px;
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

.answer-container .content {
    margin-top: 10px;
    padding: 0 10px;
    box-shadow: 0 0 4px #ccc;
    border-radius: 5px;
}

.answer-container .content li {
    border-bottom: 1px solid #f0f0f0;
}

.answer-container .content li form {
    padding: 10px 5px;
}

.answer-container .content li form p {
    padding: 10px 0;
}

.answer-container .content li form div {
    padding: 10px 0;
}

.answer-container .content li form section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.answer-container .content li form section .left,
.answer-container .content li form section .success {
    color: #24eb7b;
}

.answer-container .content li form section .error {
    color: #f74d4d;
}</style>
